<!DOCTYPE html>
<html>
<@h.head />
<body class="homepage">
	<@h.nav />
	<style>
		#main-slider {
			padding: 84px 0 0 0;
		}
		#main-slider .carousel {
			height: 320px;
			width: 50%;
			float: left;
		}
		#main-slider .carousel .carousel-indicators{
			bottom: 0px;
			width: 50%;
		}
		#main-slider .carousel .item {
			width: 100%;
		    height: 320px;
		}
		.item img{
			width: 95%;
			height: 320px
		}
		
		.retail_detail {
		    float: right;
		    width: 50%;
		}
		.retail_rows {
		    color: #000;
		    float: left;
		    width: 100%;
		    line-height: 16px;
		    margin-bottom: 15px;
		    font-size: 16px;
		    margin-left: 40px;
		}
		
		.retail_rows label {
		    float: left;
		    width: 85px;
		    color: #515151;
		}
		.retail_rows span {
		    float: left;
		    width: 260px;
		}
		.retail_detail h2 {
		    height: 34px;
		    font-size: 24px;
		    line-height: 24px;
		    color: #d43133;
		    margin-bottom: 26px;
		    margin-left: 40px;
		}
		@media (max-width: 800px) {
			#main-slider {
				padding: 15px 0 0 0;
			}
		}
		@media (max-width: 767px) {
			.carousel-indicators{
				margin-left: -50%;
			}
			#main-slider .carousel {
				width: 100%;
			}
			#main-slider .carousel .carousel-indicators{
				width: 100%;
			}
			.retail_detail {
			    width: 100%;
			}
			.retail_rows {
			    margin-left: 0px;
			}
			.item img{
				width: 100%;
				height: 320px
			}
			.retail_rows span {
			    width: 200px;
			}
			.retail_detail h2 {
			    margin-left: 0px;
			}
		}
	</style>
	<section id="main-slider">
		<div class="container">
			<div class="tab-wrap"></div>
	        <div class="carousel" data-ride="carousel">
	            <ol class="carousel-indicators">
	            <#if imgOne??>
	                <li data-target="#main-slider" data-slide-to="0" class="active"></li>
	            </#if>
	            <#if imgTwo??>
	                <li data-target="#main-slider" data-slide-to="1"></li>
	            </#if>
	            <#if imgThree??>
	                <li data-target="#main-slider" data-slide-to="2"></li>
	            </#if>
	            </ol>
		        <div>
		        	<#if imgOne??>
	                <div class="item active">
	                	<img alt="" src="${imgOne!}">
	                </div><!--/.item-->
	                </#if>
	                <#if imgTwo??>
	                <div class="item">
	                	<img alt="" src="${imgTwo!}">
	                </div><!--/.item-->
	                </#if>
	                <#if imgThree??>
	                <div class="item">
	                 	<img alt="" src="${imgThree}">
	                </div><!--/.item-->
	                </#if>
	            </div>
	        </div>
	        <div class="retail_detail">			
				<h2>${(retail.name)!}</h2>
				<div class="retail_rows">
					<label>电话：</label>
					<span>${(retail.telephone)!}</span>
				</div>
				<div class="retail_rows">
					<label>手机：</label>
					<span>${(retail.mobile)!}</span>
				</div>
				<div class="retail_rows">
					<label>联系人：</label>
					<span>${(retail.contacts)!}</span>
				</div>
				<div class="retail_rows">
					<label>详细地址：</label>
					<span>${(retail.address)!}</span>
				</div>
			</div>
        </div>
    </section>
    <section style="padding: 30px 0 30px">
    	<div class="container">
   		<!--百度地图容器-->
 		<div style="width:100%;height:500px;font-size:12px;" id="map"></div>
 		</div>
    </section>
  <@h.foot />
</body>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=80h2PhYFVE8iPBHE0cvYnKBd"></script>
   <script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map", {enableMapClick: false}); 
      map.centerAndZoom(new BMap.Point(${(retail.longitude)!}, ${(retail.latitude)!}),17);
      map.getContainer().style.zIndex=8;
    }
    function setMapEvent(){
      map.disableScrollWheelZoom();
      map.disableKeyboard();
      //map.disableDragging();
      //map.disableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"电话:${(retail.telephone)!}<br/>${(retail.address)!}",title:"<b style='color:#d43133'>${(retail.name)!}</b>",imageOffset: {width:0,height:0},position:{lng:${(retail.longitude)!}, lat:${(retail.latitude)!}}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/images/marker_red_sprite.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
    }
    var map;
    initMap();
  </script>
</html>